<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style type="text/css">
#box {
    height: 200px;
    width: 200px;
}

#over {
    z-index: 9000;
    position: absolute;
    top: -50px;
    left: -50px;
}

#frame {
    width: 400px;
    height: 400px;
    z-index: -1;
    position: absolute;
    visibility: hidden;
    left: 0;
    top: 0;
}
</style>
<div id="box">Touches go here</div>
<div id="over">
    <iframe id="frame"></iframe>
</div>

<p id="description"></p>
<div id="console"></div>

<script type="text/javascript">
description("Tests that touch events on a an element covered by a hidden iframe trigger the touch handlers.");

window.jsTestIsAsync = true;
document.querySelector("#box").addEventListener("touchstart", testComplete);

function testComplete(event)
{
    touch = event.touches[0];
    shouldBe("touch.pageX", "50");
    shouldBe("touch.pageY", "50");
    finishJSTest();
}

function runTest() {
    if (window.eventSender) {
        eventSender.addTouchPoint(50, 50);
        eventSender.touchStart();
    } else {
       debug("This test requires DRT.");
    }
}

window.onload = runTest;
</script>
